<template>
  <ul class="list">
    <li class="item" v-for="item of letters" :key="item" @click="hand" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :ref="item">{{item}}</li>
  </ul>

</template>

<script>
export default {
  props:{
    city:Object
  },
  methods:{
    hand(e){
        console.log(e.target.innerHTML)
        this.$emit("change",e.target.innerText)
  },
  touchstart(){
    this.touchStatus = true;
  },
  touchmove(e){
      if (this.touchStatus){

        if(this.timer){
          clearTimeout(this.timer)
        }

        this.timer = setTimeout(()=>{

            const touchY = e.touches[0].clientY - 79;
                      const index = Math.floor((touchY - this.startY) / 20)
                      if(index >= 0 && index < this.letters.length){
                        this.$emit('change',this.letters[index]);
                      }
        },10)
      }
  },
  touchend(){
      this.touchStatus = false;
  }
},
  computed: {
    letters () {
        const letters = []
        for(let i in this.city){
          letters.push(i);
        }
    return letters
    }
  },
  updated (){
      this.startY = this.$refs['A'][0].offsetTop;
  },
  data(){
    return {
      touchStatus : false,
      startY:0
    }
  }
}
</script>

<style scoped>
.list{
  display: flex;
  flex-direction: column;
  justify-content: center;
    position: absolute;
    top: 1.58rem;
    right: 0;
    bottom: 0;
    width: .4rem;
}
.item{
  text-align: center;
  line-height: .4rem;
  color: #00bcd4;
}
</style>
